<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
</head>

<body>
    <input type="text" name="" id="">
    <p style="display: none;"></p>
    <br />
    <input type="text" name="" id="">
    <p style="display: none;"></p>
    <br />
    <input type="button" name="" id="" value="注册">
    <script>
        let ipts = document.querySelectorAll('input');

        let isUsername = false;
        let isPassword = false;

        ipts[0].onblur = function () {
            let username = this.value; //输入框的值
            let reg = /^[a-z]\w{5,17}$/i
            if (reg.test(username)) {
                //正则验证通过
                // ajax请求 检查用户名是否存在
                this.nextElementSibling.style.display = 'block'

                let url = 'http://jx.xuzhixiang.top/ap/api/checkname.php'
                axios.get(url, {
                        params: {
                            username: username
                        }
                    })
                    .then((res) => {
                        console.log(res.data);
                        this.nextElementSibling.innerHTML = res.data.msg
                        if (res.data.code == 1) {
                            isUsername = true
                        } else {
                            isUsername = false
                        }

                    }).catch(() => {
                        isUsername = false

                    })



            } else {
                //正则验证不通过
                this.nextElementSibling.innerHTML = '用户名格式不正确 （）'
                this.nextElementSibling.style.display = 'block'



            }
        }


        ipts[1].onblur = function () {
            let password = this.value;
            let reg = /^.{6,}$/;
            if (reg.test(password)) {
                isPassword = true;
                this.nextElementSibling
            } else {
                isPassword = false;
                this.nextElementSibling.innerHTML = '密码格式不对'


            }


        }

        ipts[2].onclick = function () {
            let username = ipts[0].value;
            let password = ipts[1].value;
            if (isPassword && isUsername) {
                let regAPI = 'http://jx.xuzhixiang.top/ap/api/reg.php'

                // {password} password  变量名 作为对象的属性名 变量值 作为对象的属性值
                axios.get(regAPI, {
                        params: {
                            username: username,
                            password
                        }
                    })
                    .then(res => {
                        console.log(res.data);
                        if (res.data.code == 1) {
                            location.href = 'login.html'
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            }

        }
    </script>
</body>

</html>